<template>
  <!-- 修改资料 -->
  <div class="tsDialog1">
    <el-dialog :model-value="dialogVisible" :width="width" :fullscreen="fullscreen" :top="top" @closed="dlgClosed"
      :modal="show_modal" :close-on-click-modal="clickModel" :draggable="draggable">
      <template #header>
        <span class="el-dialog__title" v-html="title"></span>
        <button class="el-dialog__headerbtn screen_btn"  @click="toggleScreen">
          <el-icon title="最大化" v-if="fullscreen === false" class="el-dialog__close">
            <FullScreen />
          </el-icon>
          <el-icon title="还原" v-else class="el-dialog__close">
            <CopyDocument />
          </el-icon>
        </button>
      </template>
      <div class="sketch_content">
        <slot name="content"></slot>
        </div>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, toRefs, onMounted, watch } from 'vue';
import { FullScreen, CopyDocument } from '@element-plus/icons-vue'
const emit = defineEmits(['closed'])


const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  model_value: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '50%'
  },
  max_screen: {
    type: Boolean,
    default: false
  },
  modal: {
    type: Boolean,
    default: false
  },
  draggable: {
    type: Boolean,
    default: true
  },
  close_on_click_modal: {
    type: Boolean,
    default: false
  },
  top: {
    type: String,
    default: ''
  },
  fullScreen: {
    type: Boolean,
    default: false
  }
})
//最大化与还原设置

const scrollbarRef = ref()
const show_modal = ref()  //是否显示遮罩层
const fullscreen = ref()
const clickModel = ref()
const dialogVisible = ref()
const { max_screen, model_value, close_on_click_modal, modal, fullScreen } = toRefs(props)
fullscreen.value = max_screen.value
show_modal.value = modal.value
clickModel.value = close_on_click_modal.value
dialogVisible.value = model_value.value
fullscreen.value = fullScreen.value
//弹窗是否可见
watch(model_value, (newValue) => {
  dialogVisible.value = newValue
})

onMounted(() => {
  const box = document.querySelectorAll(".el-overlay-dialog")
  for (let i = 1; i < box.length; i++) {
    if (!box[i].parentNode.getAttribute('class')) {
      box[i].parentNode.style.pointerEvents = "none"
    }
  }
})



const toggleScreen = () => {
  fullscreen.value = !fullscreen.value
}



const dlgClosed = () => {
  dialogVisible.value = false
  emit('closed')
}


</script>

<style lang="less" scoped>

.tsDialog1 {
  :deep(.el-dialog__header) {
    padding: 15px 15px !important;
    position: relative !important;
    margin-right: 0 !important;
    background-color: #f6f6f6;
  }
  :deep(.el-dialog) {
  pointer-events: auto !important;
}


:deep(.el-dialog__title) {
  font-size: 15px !important;
  line-height: 16px !important;
}

:deep(.el-dialog__headerbtn) {
  top: 8px;
  right: 10px;
  width: 22px !important;
  height: 30px !important;
  font-size: 18px;
  text-align: center;
}

:deep(.el-dialog__footer) {
  padding: 10px 10px;
  background-color: #f6f6f6;
  text-align: center;
}
}



.screen_btn {
  border: 0 !important;
  color: var(--el-color-info) !important;
  position: absolute;
  cursor: pointer;
  font-size: 14px !important;
  right: 32px !important;
}

.screen_btn:active,
.screen_btn:link,
.screen_btn:visited,
.screen_btn:focus {
  color: var(--el-color-info) !important;
}



.sketch_content {
  // 必须有高度 overflow 为自动
  overflow: auto;
  max-height: 800px;

  // 滚动条的样式,宽高分别对应横竖滚动条的尺寸
  &::-webkit-scrollbar {
    width: 3px;
  }

  // 滚动条里面默认的小方块,自定义样式
  &::-webkit-scrollbar-thumb {
    background: #909399;
    border-radius: 2px;
  }

  // 滚动条里面的轨道
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}</style>

